<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">提货费用管理</span>
        </el-col>
      </div>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="价格设置" name="priceSet">
          <keep-alive>
            <div>
              <div class="color_blue padding-sm border_blue">
                <el-row :gutter="12">
                  <el-col :span="100">
                    <el-button-group>
                      <el-button
                        type="primary"
                        size="mini"
                        @click="exportPickgoodsFeePrice()"
                        >导出</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="toUploadfile(0)"
                        >上传</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="exportPickgoodsFeePrice()"
                        >下载导入模板</el-button
                      >
                    </el-button-group>
                  </el-col>
                </el-row>
              </div>

              <el-card shadow="never" class="table-container border_blue">
                <table
                  border="1"
                  cellpadding="2"
                  cellspacing="1"
                  style="table-layout:fixed;"
                  class="table-data"
                >
                  <thead>
                    <th>省</th>
                    <th>市</th>
                    <th>县/区</th>
                    <template v-for="(item, index) in pickgoodsFeeRecordSubjects">
                      <th>{{ item.showName }}</th>
                    </template>
                  </thead>
                  <tbody>
                      <template v-for="(item, index) in pickgoodsFeeZones">
                        <tr class="el-table__row">
                          <!-- 第1列每个学生只需要展示1次 -->
                          <td>
                            <span> {{ item.province }}</span>
                          </td>
                          <td>
                            <span> {{ item.city }}</span>
                          </td>
                          <td>
                            <span> {{ item.area }}</span>
                          </td>
                          <template
                            v-for="(item2, index2) in pickgoodsFeeRecordSubjects"
                          >
                            <td>
                              <template
                                v-if="
                                  channelCalculateFormulaMap &&
                                    channelCalculateFormulaMap[
                                      `${item.id}_${item2.id}`
                                    ]
                                "
                              >
                                <span>
                                  {{
                                    channelCalculateFormulaMap[
                                      `${item.id}_${item2.id}`
                                    ].formula
                                  }}
                                </span>
                              </template>
                            </td>
                          </template>
                        </tr>
                      </template>
                  </tbody>
                </table>
              </el-card>
            </div>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="历史价格表" name="priceHistoryList">
          <el-col :span="22">
            <el-card shadow="never" class="table-container">
              <div class="flex justify-between">
                <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageIndex"
                  :page-sizes="[10, 20, 50, 100, 200]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="count"
                />
               <!-- <el-button
                  size="mini"
                  type="success"
                  @click="batchUploadAmoebaChannelFormula()"
                  >导入历史价格表</el-button
                >-->
              </div>
            </el-card>
            <el-card shadow="never" class="table-container">
              <el-radio-group v-model="searchCriteria" style="width: 100%">
                <template v-for="(item, index) in pickgoodsFeeRecords">
                  <el-radio
                    :label="item.id"
                    style="width: 100%;font-size: medium; margin-bottom: 10px;border-bottom: 1px solid #ddd;"
                  >
                    <span style="font-size: small;"
                      >{{ item.fileName }} (生效时间:{{ item.startTime }}
                      {{ userMap[item.cuser] }})</span
                    >
                    <span style="float: right">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="showAmoebaChannelPrice(item.id)"
                        >查看</el-button
                      >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="exportPickgoodsFeePrice(item.id)"
                        >导出</el-button
                      >
                    </span>
                  </el-radio>
                  <br />
                </template>
              </el-radio-group>
            </el-card>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <feeUploadfile
      :channelType="1"
      :isDelete="this.isDelete"
      ref="feeUploadfile"
    ></feeUploadfile>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
const feeUploadfile = () => import("./feeUploadfile");
export default {
  components: {
    feeUploadfile
  },

  data() {
    return {
      channelType: 1,
      isDelete: 0,
      pickgoodsFeeRecordSubjects: [],
      pickgoodsFeeZones: [],
      pickgoodsFeeRecords: [],
      userMap: {},
      channelCalculateFormulaMap: {},
      activeTab: "priceSet",
      searchCriteria: "",
      waybillNos: "",
      notResult: '',
      successResult: '',
      errorResult: '',
      count: 0,
      pageSize: 20,
      pageIndex: 1,
      reBuildAmoebaChannelCostRecord: {
        cdate: "",
        cuser: "",
        status: ""
      }
    };
  },
  computed: {},

  watch: {},
  created() {},
  mounted() {
    this.autoInitData();
    this.initPriceHistoryList();
  },
  methods: {
    autoInitData() {
      ajax("managePickgoodsFee", {})
        .then(res => {
          if (res.code == 200) {
            var data = res.data;
            console.log(data);
            this.pickgoodsFeeRecordSubjects = data.pickgoodsFeeRecordSubjects;
            this.pickgoodsFeeZones = data.pickgoodsFeeZones;
            this.channelCalculateFormulaMap = data.channelCalculateFormulaMap;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    initPriceHistoryList() {
      var data = {};
      data["pageSize"] = this.pageSize;
      data["currentPage"] = this.pageIndex;
      ajax("managePickgoodsFeeRecord", data)
        .then(res => {
          if (res.code == 200) {
            this.pickgoodsFeeRecords = res.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    exportPickgoodsFeePrice(val) {
      var curRow = {};
      if (val) {
        curRow["pickgoodsfeeRecordId"] = val;
      }
      ajax("exportPickgoodsFeePrice", curRow)
        .then(res => {
          console.log("res", res);
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              qiao.bs.alert("导出失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    batchUploadAmoebaChannelFormula() {
      this.isDelete = 1;
      this.$refs.feeUploadfile.centerDialogVisible = true;
    },

    toUploadfile() {
      this.isDelete = 0;
      this.$refs.feeUploadfile.centerDialogVisible = true;
    },
    showAmoebaChannelPrice(id) {
      window.open(
        "/#" + "/blank" + "/setting__pickgoodsFeeRecord__main?id=" + id
      );
    },
    batchReBuildAmoebaChannelCost() {
      var actionRadio = this.searchCriteria;
      var waybillNos = this.waybillNos;
      if (actionRadio == "") {
        this.$message.error("请先选择历史价格表");
        return;
      }
      if (waybillNos == "") {
        this.$message.error("请先录入运单号");
        return;
      }
      ajax("batchReBuildAmoebaChannelCost", {
        amoebaPriceChannelRecordId: actionRadio,
        waybillNos: waybillNos
      })
        .then(res => {
          if (res.code == 200) {
            this.$message.success("操作成功");
            this.timeout = setTimeout(() => {
              window.location.reload(true);
            }, 1000 * Math.random());
          } else {
            if (res.message){
              this.$message.error(res.message);
            }else {
              this.$message.error("操作失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    downloadUploadformula() {
      ajax("exportAmoebaChannelPrice", {})
        .then(res => {
          console.log("res", res);
          if (res.path) {
            //helper.hide_loading();
            var fileName = res.path;
            if (fileName) {
              window.open(constant.FILE_SERVER + fileName);
            } else {
              qiao.bs.alert("导出失败");
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`页数: ${val}`);
      this.initPriceHistoryList();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      console.log(`当前页: ${val}`);
      this.initPriceHistoryList();
    }
  }
};
</script>
<style scoped>
  .color_blue {
    background-color: #d9edf7;
    color: #31708f;
    background-image: linear-gradient(to bottom, #d9edf7 0, #c4e3f3 100%);
  }
  .border_blue {
    border: 1px solid #bce8f1;
    border-radius: 5px;
  }
  table {
    min-width: 100%;
  }
  td {
    min-width: 100px;
    padding: 6px;
    margin: 6px;
  }
  tbody {
  }
  th {
    min-width: 100px;
    font-size: larger;
    padding: 6px;
    margin: 6px;
  }
  .table-container {
    overflow: auto;
    display: block;
  }
</style>
